<template>
    <div class="customer-table-container">
           
        <!-- 操作工具栏 -->
        <div class="table-actions">
            <div class="left-actions">
                <el-button
                    v-for="action in actions"
                    :key="action.name"
                    :type="action.type"
                    size="small"
                    @click="emitAction(action.name)"
                >
                    {{ action.label }}
                </el-button>
            </div>
            <div class="right-actions">
                <el-checkbox v-model="selectAll">整单</el-checkbox>
            </div>
        </div>

        <!-- 数据表格 -->
        <el-scrollbar 
    class="custom-scrollbar"
    always
    view-class="scrollbar-view"
  >
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"/>
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
            >
                <template #default="{ row }">
            <span v-if="column.prop === 'status'">
                <span :style="{ color: row.status === 0 ? 'red' : 'green' }">
                            {{ row.status === 0 ? '未审核' : '已审核' }}
                </span>
            </span>
                    <span v-else>{{ row[column.prop] }}</span>
                </template>
            </el-table-column>
            <!-- 固定操作列 -->
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="primary"  @click="$emit('edit', row)">修改</el-button>
                    <el-button type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>

        <!-- 分页组件 -->
        <div class="pagination-wrapper">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'

const props = defineProps({
    // 表格列配置
    columns: {
        type: Array as () => Array<{
            prop: string
            label: string
            width?: number
        }>,
        default: () => [
            {prop: 'code', label: '客户编码', width: 150},
            {prop: 'name', label: '客户名称', width: 200},
            {prop: 'category', label: '客户分类'},
            {prop: 'status', label: '状态', width: 120},
            {prop: 'operate', label: '操作'}

        ]
    },
    // 表格数据（已分页）
    tableData: {
        type: Array as () => any[],
        required: true
    },
    // 总数据量
    total: {
        type: Number,
        required: true
    },

    // 当前页码
    currentPage: {
        type: Number,
        required: true
    },
    // 每页显示条数
    pageSize: {
        type: Number,
        default: 5
    }
})

const emit = defineEmits(['selection-change','page-change', 'action'])

// 操作按钮配置
const actions = ref([
    {name: 'add', label: '新增', type: 'success'},
    {name: 'import', label: '导入', type: 'warning'},
    {name: 'eexport', label: '导出', type: 'danger'},
    {name: 'check', label: '审核', type: 'danger'},
])

// 编辑事件
const handleEdit = (row: any) => {
    emit('edit', row); // 触发编辑事件
}

//删除事件
const handleDelete = (row: any) => {
    emit('delete', row); // 触发删除事件
}

// 分页变化处理
const handlePageChange = (newPage: number) => {
    emit('page-change', newPage)
}

// 操作按钮事件
const emitAction = (actionName: string) => {
    emit('action', actionName)
}

// 多选处理
const selectAll = ref(false)
const selectedRows = ref<any[]>([])

const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
    emit('selection-change', selection);
}

</script>

<style scoped>
.customer-table-container {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.left-actions {
    display: flex;
    gap: 8px;
}

.pagination-wrapper {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.el-tag {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
}
</style>
